<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="proc.js"></script>
    </head>

    <body>
		<div id="pageWindow">
			<div id="pageBox">
				<div class="page" id="paraList">
					<div class="title" style="text-align:center;">
						<div class="backMaskBox" onclick="goback()">
							<div class="backMask"></div>
						</div>
						设置
					</div>
					<div class="titleSpace"></div>
					
					<div class="paraBox">
						<div class="para" onclick="gotoSubpage('setUserAgent')">
							<div class="paraName">UA标识</div>
							<div class="moreMask"></div>
							<div class="paraValue" id="userAgent">Mozilla/5.0</div>
						</div>
						
						<div class="para" onclick="gotoSubpage('setSearchEngine')">
							<div class="paraName">搜索引擎</div>
							<div class="moreMask"></div>
							<div class="paraValue" id="searchEngine">百度</div>
						</div>
						
					</div>
				</div>
				
				
				<div class="page subPage" id="setUserAgent">
					<div class="title">
						<div class="backMaskBox" onclick="goback();">
							<div class="backMask"></div>
						</div>
						UA标识
					</div>
					
					<div class="titleSpace"></div>
					
					<div class="paraBox">
						<div class="paraItem" style='font:24px/40px "Tahoma","microsoft yahei"; height:102px; padding-top:10px;'>
							<input type="url" class="inputText" id="customUA"></input>
							<div class="confirmBox">
								<input type="button" class="inputButton" style="float:left;" value="确定" onclick="setUA($('customUA').value);"></input>
								<input type="button" class="inputButton" style="float:right;" value="取消" onclick="setUA('');"></input>
							</div>
						</div>
						
						<div class="paraItem" onclick="setUA('Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36');">PC</div>
						<div class="paraItem" onclick="setUA('Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36');">Android</div>
						<div class="paraItem" onclick="setUA('Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4');">Iphone</div>
						<div class="paraItem" onclick="setUA('Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');">Ipad</div>
					</div>
				</div>
				
				<div class="page subPage" id="setSearchEngine">
					<div class="title">
						<div class="backMaskBox" onclick="goback();">
							<div class="backMask"></div>
						</div>
						搜索引擎
					</div>
					
					<div class="titleSpace"></div>
					
					<div class="paraBox">
						<div class="paraItem" onclick="setSE(0);">百度</div>
						<div class="paraItem" onclick="setSE(1);">Bing</div>
						<div class="paraItem" onclick="setSE(2);">搜狗</div>
						<div class="paraItem" onclick="setSE(3);">Google</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>
	
	<script>
		var pageLayer=0;
		var SubPage;
		
		function loadPara()
		{
			$("userAgent").innerHTML=paraConfig.getUserAgent();
			$("searchEngine").innerHTML=paraConfig.getSearchEngine();
		}
		
		window.onload=function()
		{
			console.log("onload");
			SubPage=$("setUserAgent")
			loadPara();;
		}
		
		function goback()
		{
			if(pageLayer==0)
			{
				paraConfig.finishConfig();
			}
			else
			{
				pageLayer--;
				$("pageBox").style.webkitTransform='';
				
				if(pageLayer==0)
				{
					loadPara();
				}
			}
		}
		
		function gotoSubpage(PageId)
		{
			pageLayer++;
			console.log("PageId %s", PageId);
			SubPage.style.display="none";
			SubPage=$(PageId);
			SubPage.style.display="block";
			$("pageBox").style.webkitTransform='translate3d(-50%, 0, 0)';
		}
		
		function setUA(ua)
		{
			console.log("setUserAgent %s", ua);
			paraConfig.setUserAgent(ua);
			goback();
		}
		
		function setSE(seIndex)
		{
			console.log("setUserAgent %d", seIndex);
			paraConfig.setSearchEngine(seIndex);
			goback();
		}
			
	</script>

</html>